@import url(../css/command.css);
@import url(../css/rest.css);
@import url(../utils/iconfont.css);

@mixin title_box {
    width: 94.6667vw;
    height: 8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:2.6667vw 0 2.6667vw 0;
    .infotitle_left{
        width: 28vw;
        height: 8vw;
        display: flex;
        align-items: center;
        img{
            display: block;
            width: 7.4667vw;
        }
        span{
            display: block;
            font-size: 4vmin;
            margin-left: 1.0667vw;
        }
      } 
    //   头部右边
      .infotitle_right{
        width: 14.6667vw;
        height: 8vw;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-right: 1.3333vw;
        a{
            line-height: 5.3333vw;
            span{
                margin-right: 1.0667vw;
                font-size: 3.2vmin;
                color: #000;
            }
            .right_icon{
                font-size: 3.2vmin;
                color: #ff9344;
            }
        }
      }
  }
//主体
.warp{
    width: 100vw;
    padding-bottom: 18.9333vw;
    header{
        width: 94.6667vw;
        height: 20vw;
        margin: 0 2.6667vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: pink;
        &>div{
            margin:0 2.6667vw;
        }
        //头部logo
        .logo{
            width: 16.4vw;
            height: 16.4vw;
            .logo_img{
                width: 16.4vw;
                display: block;
            }
        }
        //搜索框引用公共样式
        // 下拉框引用公共样式
        

    }
    // 主体内容
    main{
        width: 100vw;
        .banner{
            width: 100vw;
            height: 38.2667vw;
            overflow: hidden;
            position: relative;

            .banner_window{
                width: 100%;
                animation: banner_run 16s linear infinite;
            // 轮播图动画效果
            @keyframes banner_run {
                0%,20%{
                    transform: translateX(0);
                }   
                22%,40%{
                    transform: translateX(-100vw);
                }
    
                42%,60%{
                    transform: translateX(-200vw);
                }
                62%,80%{
                    transform: translateX(-100vw);
                }
                82%,100%{
                    transform: translateX(0);
                }
            }
            & div{
                width: 100%;
                position: absolute;
            }
            & div img{
                display: block;
                width: 100vw;
            }
            & div:nth-of-type(1){
                left: 0;
                top: 0;
            }
            & div:nth-of-type(2){
                left: 100vw;
                top: 0;
            }
            & div:nth-of-type(3){
                left: 200vw;
                top: 0;
            }
            }
            // 进度条
            .progress_bar{
                width: 100vw;
                height: 1.6vw;
                position: absolute;
                bottom: 12vw;
                background-color: #000;
                filter: opacity(0.4);
                &::after{
                    content: "";
                    position: absolute;
                    width: 17.3333vw;
                    height: 1.6vw;
                    background-color: #666;
                    top: 0;
                    left: 19.4667vw;
                    animation:progress_run 16s linear infinite;
                    // 进度条动画效果
                    @keyframes progress_run {
                        0%,20%{
                            transform: translateX(0);
                        }   
                        22%,40%{
                            transform: translateX(17.3333vw);
                        }
            
                        42%,60%{
                            transform: translateX(34.6667vw);
                        }
                        62%,80%{
                            transform: translateX(17.3333vw);
                        }
                        82%,100%{
                            transform: translateX(0);
                        }
                    }
                }
            }
        }
    //   优惠列表
        .discount{
              width: 94.6667vw;
              height: 38.8vw;
              margin: 0 2.6667vw 0 2.6667vw;
            .infotitle{
                @include title_box;
            }
            .discount_list{
                // width: 80vw;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: 0 0 0 2.2667vw;
                & div:nth-child(odd){
                    margin-left: 5.5vw;
                }
                & div:nth-child(even){
                    margin-right: 9.0667vw;
                }
                .discount_cont{
                    width: 32.1333vw;
                    height: 12.5333vw;
                    margin-bottom: 4vw;
                    img{
                        display: block;
                        width: 100%;
                    }
                  }
            }

        }
        // 猜你喜欢区域
        .like_more{
            width: 94.6667vw;
            margin: 0 2.6667vw;
            .infotitle{
                @include title_box;
            }
            .food_list{
                width: 94.6667vw;
                .food_box{
                    display: flex;
                    justify-content: space-between;
                    margin: 4vw 0;
                    width: 94.6667vw;
                    height: 21.8667vw;
                    .foodinfo_left{
                         width: 28.1333vw;
                         img{
                            width: 100%;
                            display: block;
                         }
                    }
                    .foodinfo_mid{
                        width: 40.2vw;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        & p:nth-of-type(1){
                          font-size: 4vmin;
                          a{
                            color: #000;
                          }
                        }
                        & p:nth-of-type(2){
                            font-size: 2.9333vmin;
                            margin: 2.6667vw 0;
                            color: #494949;
                        }
                        & p:nth-of-type(3){
                            font-size: 4.2667vmin;
                            color: #ff9344;
                        }
                    }
                    .foodinfo_right{
                        width: 14.5333vw;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        p{
                            font-size: 2.9333vmin;
                            color: #494949;
                            text-align: right;
                        }
                        & p:nth-of-type(1){
                            margin-bottom: 9.3333vw;
                        }
                    }
                }
                &>.food_box:last-child{
                    margin-bottom: 0; 
               }
            }
        }
    }
    //底部样式
}